<template>
	<!-- 我的粉丝 -->
	<view class="fans">
		<!-- #ifdef APP-PLUS -->
		<top-set></top-set>
		<tab-top fixed="true" title="我的粉丝"></tab-top>
		<!-- #endif -->
		<view class="show" v-if="show">
			<image src="/static/bg/noEvaluation.png"></image>
			<view class="show_text">您还没有粉丝哦</view>
		</view>
		<view class="main" v-if="!show">
			<view class="item" v-for="(item, index) in list" :key="index">
				<view class="box">
					<view class="img">
						<image :src="item.info.hotel_logo ? item.info.hotel_logo + '?imageView2/1/w/500/h/500':'/static/bg/img.png'"></image>
					</view>
					<view class="content">
						<view class="name">{{item.info.name}}</view>
						<view class="signature">{{item.info.hotel_address || '暂无地址'}}</view>
						<view class="text">完成 {{item.info.count}}单 粉丝 {{item.info.fans}}</view>
					</view>
				</view>
				<view class="btn1" @tap="fans(item)" v-if="item.mutual_concern == 0">+关注</view>
				<view class="btn2" @tap="focus(item)" v-if="item.mutual_concern == 1">
					<image src="/static/icon/lr.png" mode=""></image>
					相互关注
				</view>
			</view>
		</view>
		<jc-popUp position="bottom" ref="pop1" markTapHide="true">
			<view class="footer">
				<view class="item">确定取消关注此人?</view>
				<view class="item" @tap="total_(1)">确定</view>
				<view class="item" @tap="total_(0)">取消</view>
			</view>
		</jc-popUp>
	</view>
</template>

<script>
let num = 0;
import jcPopUp from '@/components/jc-popUp/jc-popUp.vue';
export default {
	data() {
		return {
			show: true,
			list: [],
			avatar: '',
			item:''
		};
	},
	onLoad() {
		this.req({
				url: 'both/listSetup',
				method: 'GET',
				data: {
					host_id: this.isLogin().id,
					setup_type: 3,
					app_type: 1,
					page: 1,
					limit: 20
				}
			},
			res => {
				if(res.data.status == 0){
					return;
				}
				this.list = res.data.data.list.list;
				this.show = false;
			}
		);
	},
	methods: {
		async fans(item){
			/**
			 * 弹出层
			 */
			this.item = item
			let [_fans,fans] = await this.attention()
			console.log([_fans,fans])
			if(_fans || fans.data.status == 0 || fans.data.title == "该保洁已在您关注列表"){
				this.$refs.pop.hide();
				this.showToast(fans.data.message);
				return;
			}
			this.item.mutual_concern = 1
			this.$refs.pop.hide();
			this.showToast('已关注');
		},
		focus(item){
			this.$refs.pop1.show();
			this.item = item
		},
		async total_(e) {
			/**
			 * 取消关注
			 */
			if (!e) { //取消取消关注
				this.$refs.pop1.hide();
				return;
			}
			let [_deleteFocus,deleteFocus] = await this.deleteFocus()
			if(_deleteFocus || deleteFocus.data.status == 0){
				return;
			}
			this.item.mutual_concern = 0
			//关闭弹层
			this.$refs.pop1.hide();
			this.showToast('已取消关注');
		},
		attention(){
			/**
			 * 关注
			 */
			return this.getReq({
				url: 'both/listSetup',
				method:'POST',
				data: {
					host_id: this.item.guest_id, 
					guest_id: this.item.host_id,
					setup_type: 1,
					app_type: 1
				}
			})
		},
		deleteFocus(){
			/**
			 * 取消关注接口
			 */
			return this.getReq({
				url: 'both/listSetup/' + this.item.guest_id,
				method:'DELETE',
				data: {
					guest_id: this.item.host_id,
					setup_type: 1,
					app_type: 1
				}
			})
		}
	},
	components: { jcPopUp }
};
</script>

<style scoped lang="scss">
.fans {
	.show {
		width: 100%;
		padding: 100upx 116upx;
		box-sizing: border-box;
		position: relative;
		.show_text {
			position: absolute;
			top: 400upx;
			left: 290upx;
			font-size: 24upx;
			color: #999;
		}
		image {
			width: 518upx;
			height: 444upx;
		}
	}
	.main {
		margin-top: 10upx;
		width: 100%;
		padding: 0 24upx;
		box-sizing: border-box;
		.item:nth-last-child(1) {
			border-bottom: 0;
		}
		.item {
			width: 100%;
			height: 180upx;
			border-bottom: 1upx solid #e5e5e5;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.box {
				display: flex;
				.img {
					width: 120upx;
					height: 120upx;
					margin-right: 34upx;
					image {
						width: 100%;
						height: 100%;
						border-radius: 8upx;
					}
				}
				.content {
					line-height: 1;
					.name {
						font-size: 32upx;
					}
					.signature {
						width: 350upx;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						font-size: 24upx;
						line-height: 60upx;
						color: #999999;
					}
					.text {
						font-size: 24upx;
					}
				}
			}
			.btn1 {
				width: 120upx;
				height: 50upx;
				border-radius: 8upx;
				border: solid 2upx #3595f9;
				font-size: 28upx;
				line-height: 50upx;
				text-align: center;
				color: #3595f9;
			}
			.btn2 {
				width: 174upx;
				height: 50upx;
				border-radius: 8upx;
				border: solid 2upx #e5e5e5;
				font-size: 28upx;
				color: #999999;
				line-height: 50upx;
				text-align: center;
				image{
					width: 30upx;
					height: 30upx;
				}
			}
		}
	}
	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750upx;
		height: 320upx;
		background-color: #ffffff;
		.item:nth-child(1) {
			font-size: 24upx;
			color: #999999;
			border-bottom: 1upx solid #e5e5e5;
		}
		.item:nth-child(2) {
			border-bottom: 19upx solid #e5e5e5;
		}
		.item {
			height: 100upx;
			line-height: 100upx;
			font-size: 28upx;
			text-align: center;
		}
	}
}
</style>
